import { SearchField, Flex, View } from '@aws-amplify/ui-react';

import { Example, ExampleCode } from '@/components/Example';
import { Fragment } from '@/components/Fragment';
import { ComponentClassTable } from '@/components/ComponentClassTable';
import StandardHTMLAttributes from '@/components/StandardHTMLAttributes.mdx';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';
import { SearchFieldDemo } from './demo';
import {
  DefaultSearchFieldExample,
  PlaceholderSearchFieldExample,
  RefExample,
  SearchFieldControlledExample,
  SearchFieldStyledPropsExample,
  SearchFieldThemeExample,
  SizeSearchFieldExample,
  VariationSearchFieldExample,
} from './examples';

Users may clear the field by hitting the `Esc` key or by clicking the
clear button. When users hit `Enter` key or click the search icon, the `onSubmit` event handler will be fired.

## Demo

<SearchFieldDemo />

## Usage

Import the `SearchField` primitive, and provide a `label` for accessibility/usability.

<Example>
  <View>
    <DefaultSearchFieldExample />
  </View>
  
  <ExampleCode>

```jsx file=./examples/DefaultSearchFieldExample.tsx

```

  </ExampleCode>
</Example>

**Note**: The clear text (x) button will show after user has entered text.

### Controlled component

<Example>
  <SearchFieldControlledExample />
  <ExampleCode>
    ```tsx file=./examples/SearchFieldControlledExample.tsx
    ```
  </ExampleCode>
</Example>

***Note***: When you use SearchField in controlled way, it is your responsibility to set up `onClear` other than `onChange` since the input value is under your control.

### Accessibility / Label behavior

<Fragment>{() => import('./../shared/formFieldAccessibility.mdx')}</Fragment>

### Placeholder

Text that appears in the form control when it has no value set.

<Example>
  <View>
    <PlaceholderSearchFieldExample />
  </View>
  
  <ExampleCode>

```jsx file=./examples/PlaceholderSearchFieldExample.tsx

```

  </ExampleCode>
</Example>

### Sizes

Use the `size` prop to change `SearchField` size. Available options are `small`, `large`, and none (default).

<Example>
  <View>
    <SizeSearchFieldExample />
  </View>
  
  <ExampleCode>

```jsx file=./examples/SizeSearchFieldExample.tsx

```

  </ExampleCode>
</Example>

### Variations

There are two variation styles available: default and `quiet`.

<Example>
  <View>
    <VariationSearchFieldExample />
  </View>
  
  <ExampleCode>

```jsx file=./examples/VariationSearchFieldExample.tsx

```

  </ExampleCode>
</Example>

### Forward refs

<Fragment>{() => import('./../shared/forwardRefAlert.mdx')}</Fragment>

The standard `ref` prop will forward to the `input` element, the `searchButtonRef` prop forwards to the search `button` element.

The following is a contrived example demonstrating use of the ref props:

<Example>
  <RefExample />
<ExampleCode>

```tsx file=./examples/refs.tsx

```

</ExampleCode>
</Example>

<StandardHTMLAttributes component="SearchField" link="input" element="<input>">
  <Example>
    <SearchField label="Search" name="search"/>

    <ExampleCode>

    ```jsx
    <SearchField label="Search" name="search"/>
    ```

    </ExampleCode>

  </Example>
</StandardHTMLAttributes>

## CSS Styling

<ThemeExample component="SearchField">
  <Example>
    <SearchFieldThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/SearchFieldThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="SearchField" />

### Global styling

To override styling on all SearchField primitives, you can set the Amplify CSS variables or use the built-in `.amplify-searchfield` class.

```css
/* styles.css */
:root {
  --amplify-components-button-color: black;
  --amplify-components-button-border-color: black;
  --amplify-components-fieldcontrol-border-color: black;
}
/* OR */
.amplify-searchfield {
  --amplify-components-button-color: black;
  --amplify-components-button-border-color: black;
  --amplify-components-fieldcontrol-border-color: black;
}
```

<Example>
  <SearchField
    label="Globally styled search field"
    className="globally-styled-searchfield"
  />
  <ExampleCode>

```css
/* styles.css */
.amplify-searchfield {
  --amplify-components-button-color: rebeccapurple;
  --amplify-components-button-border-color: rebeccapurple;
  --amplify-components-fieldcontrol-border-color: rebeccapurple;
}
```

  </ExampleCode>
</Example>

### Local styling

To override styling on a specific SearchField, you can use a class selector or style props.

_Using a class selector:_

<Example>
  <SearchField
    className="custom-searchfield-class"
    label="Square password field"
  />
  <ExampleCode>

```css
/* styles.css */
.custom-searchfield-class .amplify-input,
.custom-searchfield-class .amplify-button {
  border-radius: 0;
}
```

  </ExampleCode>
</Example>

_Using style props:_

All style props will be applied to the [`Flex`](flex) wrapper of the `SearchField`. To style the `input` of the `SearchField`, you can pass a `inputStyles` prop with the style props you want to apply to the input.

<Example>
  <View>
    <SearchFieldStyledPropsExample />
  </View>
  
  <ExampleCode>

```jsx file=./examples/SearchFieldStyledPropsExample.tsx

```

  </ExampleCode>
</Example>